<template>
	<view class="machine container machine" v-if="showPage">
		<!-- style="height: 100vh;"  -->
		<view class="w100 pb10 bgF fixhead"><u-tabs bar-width="70" :list="list" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs></view>
		<view class="w100" style="height: 92rpx;"></view>

		<view class="container" style="height: 1px;"></view>
		<!-- 矿机 -->
		<view v-if="current == 0">
			<view v-if="machineryList.length > 0">
				<view class="container flex-spc-x bgF  pt20 pb20 mb20" v-for="(item, index) in machineryList" v-bind:key="index">
					<view class="w50 flex-xy"><image :src="item.url" mode="widthFix" class="w70"></image></view>
					<view class="w50">
						<view class="co056 fs34 pb10">{{ item.name }}</view>
						<view class="fs28 pb10">算力:{{ item.power }}</view>
						<view class="fs28 pb10">运行周期：{{ item.period }}分钟</view>
						<!-- ({{ item.day }}天) -->
						<view class="fs28 pb10">总产量：{{ item.output }} 矿币</view>
						<view class="fs28 pb10">幸运币价格：{{ item.xyb }}幸运币</view>
						<view class="fs28 pb10">矿币价格：{{ item.price }}幸运币</view>
						<view class="fs28 pb10">最多购买：{{ item.max }}台</view>
						<u-button type="primary" :ripple="true" size="mini" @click="byMachine(index)">立即购买</u-button>
					</view>
				</view>
				<view class="container  mt20" style="background: #f3f3f3;"><u-divider color="#CCC" bg-color="#f3f3f3">~到底了,宝贝~</u-divider></view>
			</view>
			<view v-else class="container flex-xy">
				<view class="w100" style="height: 92rpx;"></view>
				<image src="../../static/noMsg.png" mode="widthFix" style="width: 60%;" class="pt50"></image>
			</view>
		</view>
		<!--  矿机加速器  -->
		<view v-if="current == 1">
			<view v-if="speedList.length > 0">
				<view class="container flex-spc-x bgF  pt20 pb20 mb20" v-for="(item, index) in speedList" v-bind:key="index">
					<view class="w50 flex-xy"><image :src="item.url" mode="widthFix" class="w70"></image></view>
					<view class="w50">
						<view class="co056 fs34 pb10">{{ item.name }}</view>
						<view class="fs28 pb10">缩短运行时间：{{ item.time }}分钟</view>
						<view class="fs28 pb10">矿币价格：{{ item.price }}矿币</view>
						<view class="fs28 pb10">算力价格：{{ item.countPrice }}算力</view>
						<u-button type="primary" :ripple="true" size="mini " @click="bySpeed(index)">立即购买</u-button>
					</view>
				</view>

				<view class="container  bgF  pt20 pb20 pl20 pr20 fs28 co666">
					<view>温馨提示：</view>
					<view>
						1、矿机加速器分为小型加速器,中型加速器和大型加速器三种加速器，小型加速器只适用于小型矿机，中型加速器只适用于中型矿机，
						大型加速器只适用于大型矿机，会员可以通过算力进行兑换，兑换完成后， 会员可以找到我的矿机点加速使用相应的加速器。<br> 2、加速器的缩短运行时间为20%
						加速器兑换：小型加速器5G或者125矿币，中型加速器25G或者400矿币，大型加速器100G或者500矿币。
					</view>
				</view>

				<view class="container mt20" style="background: #f3f3f3;"><u-divider color="#CCC" bg-color="#f3f3f3">~到底了,宝贝~</u-divider></view>
			</view>

			<view v-else class="container flex-xy">
				<view class="w100" style="height: 92rpx;"></view>
				<image src="../../static/noMsg.png" mode="widthFix" style="width: 60%;" class="pt50"></image>
			</view>
		</view>

		<view class="w100" style="height: 90rpx;"></view>

		<u-modal v-model="show" width="70%" :content="content" title="确认支付" show-cancel-button @confirm="inputConfirm" @cancel="inputCancel">
			<view class="slot-content mt30 mb30 w100 flex-xy">
				<view class="w90 flex-xy">
					<view class="fs30 fwbr mt20 mb20" v-if="current == 0">请选择支付类型</view>
					<u-radio-group v-if="current == 0" v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in chooseList" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
					<u-radio-group v-if="current == 1" v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in powerList" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
					<view class="fs30 fwbr mt20 mb20">请输入您的支付密码</view>
					<input class="uni-input tac" type="number" password v-model="password" focus placeholder="密码" @blur="inputBlur" />
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chooseList: [
				{
					name: '幸运币'
				},
				{
					name: '矿币'
				}
			],
			paymentType: 1, //1 辛运币支付 2 矿币支付 paymentType  3  算力支付
			value: '幸运币', //默认
			powerList: [
				{
					name: '矿币'
				},
				{
					name: '算力'
				}
			],
			showPage: false, //没有登录不显示内容
			list: [
				{
					name: '矿机'
				},
				{
					name: '矿机加速器'
				}
			],
			index: null, //当前点击立即购买时候的购买商品下标
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			show: false, //模态框
			password: '', //模态框密码
			content: '',
			pageSize: 5, //每页数量
			pageNum: 1, //页码
			machineryList: [], // 矿机列表
			speedList: [] // 矿机加速器列表
		};
	},
	methods: {
		// radio
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			console.log(e);
			if (e == '幸运币') this.paymentType = 1;
			if (e == '矿币') this.paymentType = 2;
			if (e == '算力') this.paymentType = 3;
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},

		// 购买矿机
		byMachine(index) {
			this.show = true;
			this.index = index;
		},

		// 购买加速器
		bySpeed(index) {
			this.show = true;
			this.index = index;
		},
		// 模态框事件
		inputBlur(e) {
			// console.log('inputBlur', e);
			this.password = e.detail.value;
		},
		inputConfirm(e) {
			// console.log('inputConfirm', this.password);
			// 没有密码
			if (!!!this.password) {
				uni.showToast({
					title: '请输入密码！',
					mask: true,
					icon: 'none',
					duration: 500
				});
				return;
			}

			if (!!this.password) {
				this.passwordCheck(this.password)
					.then(() => {
						// 密码校验成功
						// 购买矿机  POST/mobileUser/UserMachinery新增矿机
						if (this.current == 0) {
							let getObj = {
								url: '/mobileUser/UserMachinery',
								data: {
									userId: uni.getStorageSync('y-userId'),
									machineryId: this.machineryList[this.index].machineryId,
									price: this.machineryList[this.index].price,
									token: uni.getStorageSync('y-token'),
									paymentType: this.paymentType
								}
							};
							this.postRequest(getObj)
								.then(res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: res.data.msg,
											mask: true,
											icon: 'none',
											duration: 500
										});
									} else {
										uni.showToast({
											title: res.data.msg,
											mask: true,
											icon: 'none',
											duration: 500
										});
									}
								})
								.catch(err => {});
						}
						// 购买矿机加速器	// POST/mobileUser/UserSpeed新增用户加速器关联    "speedId": 1, "userId": "1" "price":50
						if (this.current == 1) {
							let getObj = {
								url: '/mobileUser/UserSpeed',
								data: {
									userId: uni.getStorageSync('y-userId'),
									speedId: this.speedList[this.index].speedId,
									price: this.speedList[this.index].price,
									token: uni.getStorageSync('y-token'),
									paymentType: this.paymentType
								}
							};
							this.postRequest(getObj)
								.then(res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: res.data.msg,
											mask: true,
											icon: 'none',
											duration: 500
										});
									} else {
										uni.showToast({
											title: res.data.msg,
											mask: true,
											icon: 'none',
											duration: 500
										});
									}
								})
								.catch(err => {});
						}
					})
					.catch(() => {
						//密码校验失败
					});
			}

			this.password = '';
		},
		inputCancel() {
			this.password = '';
		},

		// ************************************************************************************************************************************************************

		// 重置两个数组 页码
		reset() {
			this.machineryList = [];
			this.speedList = [];
			this.pageSize = 5; //每页数量
			this.pageNum = 1; //页码
		},
		// GET/mobileUser/machinery/list查询矿机列表 查询矿机列表  全部矿机可购买
		getMachineryList() {
			// 矿机购买默认是幸运币支付
			(this.paymentType = 1), //1 辛运币支付 2 矿币支付 paymentType  3  算力支付
				(this.value = '幸运币'); //默认

			var postObj = { url: '/mobileUser/machinery/list', data: { pageNum: this.pageNum, pageSize: this.pageSize } };
			this.getRequest(postObj)
				.then(res => {
					// console.log('res查询矿机列表', res);
					if (res.data.code == 200) {
						if (res.data.rows.length > 0) {
							res.data.rows.forEach((items, i) => {
								items.url = '/dev' + items.url;
							});
						}
						this.machineryList = [...this.machineryList, ...res.data.rows];
					}
				})
				.catch(err => {
					// console.log('err查询矿机列表', err);
				});
		},
		// GET/mobileUser/speed/list查询矿机加速器列表
		getSpeedList() {
			// 加速器购买默认是矿币支付
			(this.paymentType = 2), //1 辛运币支付 2 矿币支付 paymentType  3  算力支付
				(this.value = '矿币'); //默认

			var postObj = { url: '/mobileUser/speed/list', data: { pageNum: this.pageNum, pageSize: this.pageSize } };
			this.getRequest(postObj)
				.then(res => {
					// console.log('res查询矿机加速器列表', res);
					if (res.data.code == 200) {
						if (res.data.rows.length > 0) {
							res.data.rows.forEach((items, i) => {
								items.url = '/dev' + items.url;
							});
						}
						this.speedList = [...this.speedList, ...res.data.rows];
					}
				})
				.catch(err => {
					// console.log('err查询矿机加速器列表', err);
				});
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.current = index;
			this.reset(); //重置清空
			if (this.current == 0) {
				this.getMachineryList();
			}
			if (this.current == 1) {
				this.getSpeedList();
			}
		}
		// ************************************************************************************************************************************************************
	},
	created() {},
	onShow() {
		if (this.showPage) {
			(this.machineryList = []), // 矿机列表
				(this.speedList = []); // 矿机加速器列表
			this.reset();
			this.current = 0;
			if (this.current == 0) this.getMachineryList(); // 查询矿机列表  全部矿机可购买
			if (this.current == 1) this.getSpeedList(); // 查询矿机加速器列表
		}
	},
	onLoad(options) {
		if (this.judgeLoading(options)) {
			this.showPage = true;
		}
	},
	// 触底事件
	onReachBottom() {
		if (this.current == 0) {
			this.pageNum += 1;
			this.getMachineryList();
		}
		if (this.current == 1) {
			this.pageNum += 1;
			this.getSpeedList();
		}
	}
};
</script>

<style lang="scss" scoped>
.fixhead {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
}
</style>
